<!--
 * @Author: wangzm
 * @Date: 2020-01-14 15:49:01
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-17 16:02:30
 * @Description: box-content
 -->
<template>
  <view class="box-content">
    <!-- 轮播图 -->
    <view v-if="boxData.banner_list && boxData.banner_list.length" class="block banner-block">
      <base-swiper :swiper-list="boxData.banner_list" border-radius="20rpx" @itemClick="bannerItemClick"></base-swiper>
    </view>
    <!-- 箱起云仓 -->
    <template v-if="boxData.boxCloud && boxData.boxCloud.length && boxData.box_module && boxData.box_module.stock_box_series_list && boxData.box_module.stock_box_series_list.length">
      <view class="box-block box-block-package">
        <view class="box-block-title">
          <view class="main">{{ boxData.boxCloud[0].title }}</view>
          <view>{{ boxData.boxCloud[0].subtitle }}</view>
        </view>
        <view class="box-block-content">
          <view v-for="(subItem, subIndex) in boxData.box_module.stock_box_series_list" :key="subIndex" class="box-block-container box-block-package-black">
            <b-image class-name="box-img-item" :src="subItem.img" width="718" height="466" mode="scaleToFill" @click="toBoxDetial(boxData.box_module, subItem)"></b-image>
            <view class="title-box">
              {{ subItem.series_name }}
              <image class="in-icon" src="/static/images/icon/icon_more_list2.png" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- 箱起礼包 -->
    <template v-if="boxData.boxPackage && boxData.boxPackage.length && boxData.box_gift && boxData.box_gift.length">
      <view class="box-block box-block-package">
        <view class="box-block-title">
          <view class="main">{{ boxData.boxPackage[0].title }}</view>
          <view>{{ boxData.boxPackage[0].subtitle }}</view>
        </view>
        <view class="box-block-content">
          <view v-for="(subItem, subIndex) in boxData.box_gift" :key="subIndex" class="box-block-container">
            <b-image class-name="box-img-item" :src="subItem.image_main" width="718" height="466" mode="scaleToFill" @click="toBoxGoods(subItem)"></b-image>
            <view class="title-box">
              {{ subItem.title }}
              <image class="in-icon" src="/static/images/icon/icon_more_list.png" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- 箱起计划 -->
    <template v-if="boxData.boxPlan && boxData.boxPlan.length && boxData.box_module && boxData.box_module.series_list && boxData.box_module.series_list.length">
      <view class="box-block box-block-package">
        <view class="box-block-title">
          <view class="main">{{ boxData.boxPlan[0].title }}</view>
          <view>{{ boxData.boxPlan[0].subtitle }}</view>
        </view>
        <view class="box-block-content">
          <view v-for="(subItem, subIndex) in boxData.box_module.series_list" :key="subIndex" class="box-block-container">
            <b-image class-name="box-img-item" :src="subItem.img" width="718" height="466" mode="scaleToFill" @click="toBoxDetial(boxData.box_module, subItem)"></b-image>
            <view class="title-box">
              {{ subItem.series_name }}
              <image class="in-icon" src="/static/images/icon/icon_more_list.png" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- 城市合伙人 -->
    <template v-if="boxData.boxPartner && boxData.boxPartner.length && boxData.partner_module && boxData.partner_module.goods_list && boxData.partner_module.goods_list.length">
      <view class="box-block box-block-package">
        <view class="box-block-title">
          <view class="main">{{ boxData.boxPartner[0].title }}</view>
          <view>{{ boxData.boxPartner[0].subtitle }}</view>
        </view>
        <view class="box-block-content">
          <view v-for="(subItem, subIndex) in boxData.partner_module.goods_list" :key="subIndex" class="box-block-container">
            <b-image class-name="box-img-item" :src="subItem.pic" width="718" height="466" mode="scaleToFill" @click="toPartnerGoods(subItem)"></b-image>
            <view class="title-box">
              {{ subItem.title }}
              <image class="in-icon" src="/static/images/icon/icon_more_list.png" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
    </template>

    <view v-if="hasPerMission" class="box-icon" :class="{ active: showBoxIcon }" @click="toMineBox">
      <image src="/static/images/home/icon_box.png" mode="aspectFit" />
      <text>我的箱起</text>
      <view v-if="approving_number" class="num">
        {{ approving_number | formatNumberPlus }}
      </view>
    </view>
    <guide position="top: 600rpx" guide-pic="/static/images/box/box_guide_home.png"></guide>
  </view>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { formatUrlParam } from '@/utils/tools'
import baseSwiper from '@/components/base/base-swiper.vue'
import Guide from '@/components/guide/index'
import { toFunctionDetail, toGoods } from '@/utils/navigateTo'
export default {
  name: 'BoxContent',
  components: {
    baseSwiper,
    Guide
  },
  props: {
    theme: {
      type: Object,
      default: () => {
        return {
          navbar_backgroud: '',
          banner_background: '',
          function_background: ''
        }
      }
    },
    boxData: {
      type: Object,
      default() {
        return {
          banner_list: [],
          boxPackage: [],
          box_gift: [],
          boxPlan: [],
          box_module: {},
          boxPartner: [],
          partner_module: {}
        }
      }
    },
    showBoxIcon: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      hasPerMission: false,
      approving_number: 0
    }
  },
  computed: {
    ...mapState([
      'userInfo'
    ])
  },
  created() {
    this.getRole()
  },
  methods: {
    async getRole() {
      const res = await this.$api.earnApi.getPermission()
      if (res.success) {
        this.SET_USER_INFO({
          boxPermission: res.data
        })
        this.hasPerMission = (this.userInfo.boxPermission && this.userInfo.boxPermission.length)
        if (!this.hasPerMission) return
        const res2 = await this.$api.boxApi.getMyBoxHome({})
        if (res2.success && res2.data && res2.data.approve_number_vo) {
          this.approving_number = res2.data.approve_number_vo.approving_number
        }
      }
    },
    bannerItemClick({ item }) {
      this.$sensorTrack('CLICKBUTTON', {
        button_name: 'banner',
        page_name: 'main_boxup',
        module_name: item.title
      })
      const firstseat = uni.getStorageSync('firstseat')
      toFunctionDetail(item, 'navigateTo', {
        preseat: item.title,
        firstseat: firstseat || '首页_运营位_箱起计划'
      })
    },
    toMineBox() {
      this.$navigateTo(`/pagesBox/mine/index`)
    },
    toBoxGoods(item) {
      this.$sensorTrack('CLICKBUTTON', {
        button_name: 'oh_day_plan',
        page_name: 'main_boxup',
        module_name: item.title
      })
      if (item.bonus_gift_id) {
        this.$navigateTo(`/pagesDetail/commodity/index?bonus_gift_id=${item.bonus_gift_id}&type=boxGoods`)
      } else {
        const url = formatUrlParam('/pagesDetail/commodity/index', item)
        this.$navigateTo(url)
      }
    },
    async toBoxDetial(box_module, item) {
      if (!box_module.is_show) {
        uni.showToast({
          text: '您没有权限进入',
          icon: 'none'
        })
        return
      }
      this.$sensorTrack('CLICKBUTTON', {
        button_name: 'boxup_plan',
        page_name: 'main_boxup',
        module_name: item.series_name
      })
      const res = await this.$api.earnApi.earningBoxDetail({
        series_id: item.series_id,
        page_no: 1,
        page_size: 999
      })
      if (res.success && res.data) {
        if (res.data.box_goods.length === 1) {
          const box_goods_item = res.data.box_goods[0]
          const query = {
            from_type: 11,
            series_id: item.series_id,
            box_id: box_goods_item.box_id,
            type: 'boxGoods'
          }
          this.toBoxGoods(query)
        } else {
          this.$navigateTo(`/pagesDetail/box-sale/index?from_type=11&&series_id=${encodeURIComponent(item.series_id)}&title=${encodeURIComponent(item.series_name)}`)
        }
      }
    },
    toPartnerGoods(item) {
      const firstseat = uni.getStorageSync('firstseat')
      toGoods(item, 'navigateTo', {
        preseat: '城市合伙人',
        firstseat: firstseat || '首页_运营位_箱起计划'
      })
    },
    ...mapActions([
      'SET_USER_INFO'
    ])
  }
}
</script>
<style scoped lang="scss">
.empty-block{
  padding-top: 30%;
  background: #fff;
}
.box-icon{
  @include transition;
  @include flex();
  @include a-center;
  @include j-center;
  right: -130rpx;
  bottom: 300rpx;
  bottom: calc(300rpx + constant(safe-area-inset-bottom));
  bottom: calc(300rpx + env(safe-area-inset-bottom));
  position: fixed;
  width: 200rpx;
  height: 74rpx;
  border-top-left-radius: 38rpx;
  border-bottom-left-radius: 38rpx;
  color: white;
  font-size: 26rpx;
  background-color: rgba(0, 0, 0, 0.6);
  image{
    width: 44rpx;
    height: 44rpx;
    margin-right: 10rpx;
  }
  .num{
    height: 26rpx;
    background-color: #F10D3B;
    color: white;
    border-radius: 13rpx;
    position: absolute;
    left: 12rpx;
    font-size: 20rpx;
    line-height: 26rpx;
    top: 4rpx;
    padding: 0 6rpx;
  }

  &.active{
    right: 0rpx;
  }
}
</style>
